<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://jquery-csv.googlecode.com/git/src/jquery.csv.js"></script>
<script>

var numEntries = 3;
var curEntry   = 0;
var data    = new Array();
//i3asrData[0] = "zero";
//i3asrData[1] = "one";
//i3asrData[2] = "two";

//var transData    = new Array();

<script>

  $(document).ready(function() {
    if(isAPIAvailable()) {
      $('#files').bind('change', handleFileSelect);
    }
  });

  function isAPIAvailable() {
    // Check for the various File API support.
    if (window.File && window.FileReader && window.FileList && window.Blob) {
      // Great success! All the File APIs are supported.
      return true;
    } else {
      // source: File API availability - http://caniuse.com/#feat=fileapi
      // source: <output> availability - http://html5doctor.com/the-output-element/
      document.writeln('The HTML5 APIs used in this form are only available in the following browsers:<br />');
      // 6.0 File API & 13.0 <output>
      document.writeln(' - Google Chrome: 13.0 or later<br />');
      // 3.6 File API & 6.0 <output>
      document.writeln(' - Mozilla Firefox: 6.0 or later<br />');
      // 10.0 File API & 10.0 <output>
      document.writeln(' - Internet Explorer: Not supported (partial support expected in 10.0)<br />');
      // ? File API & 5.1 <output>
      document.writeln(' - Safari: Not supported<br />');
      // ? File API & 9.2 <output>
      document.writeln(' - Opera: Not supported');
      return false;
    }
  }

  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    var file = files[0];

    // read the file metadata
    var output = ''
        output += '<span style="font-weight:bold;">' + escape(file.name) + '</span><br />\n';
        output += ' - FileType: ' + (file.type || 'n/a') + '<br />\n';
        output += ' - FileSize: ' + file.size + ' bytes<br />\n';
        output += ' - LastModified: ' + (file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a') + '<br />\n';

    // read the file contents
    printTable(file);

    // post the results
    $('#list').append(output);
  }


function load_data(file) {
    var reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function(event){
    var csv = event.target.result;
      
      data = $.csv.toArrays(csv);
      numEntries = data.length();
      /*
      var html = '';
      for(var row in data) {
        html += '<tr>\r\n';
        for(var item in data[row]) {
          html += '<td>' + data[row][item] + '</td>\r\n';
        }
        html += '</tr>\r\n';
      }
      $('#contents').html(html);
      */
    };
    reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
  }



function process_prev()
{
    process_save();
    if((curEntry) > 0)
    {
        --curEntry;
        display_cur();
    }
    else
    {
        alert("Begin");
    }

}
function display_cur()
{
    load_data();

    if(numEntries > 0 && curEntry < numEntries)
    {
        document.getElementById("hdr").innerHTML           = curEntry;
        document.getElementById("transcription").innerHTML = data[0][curEntry]
        document.getElementById("i3asrhyp").innerHTML      = data[1][curEntry];
    }
    
}
function process_save()
{
    if(curEntry < numEntries)
    {
        var tran = document.getElementById("inputtranscription").value;
        if(tran != "")
        {
            data[0][curEntry] = tran;
        }
        else
        {
            data[0][curEntry] = data[1][curEntry];
        }
        document.getElementById("transcription").innerHTML = data[0][curEntry];
        document.getElementById("inputtranscription").value  = "";
    }
}
function process_next()
{
    process_save();

    if((curEntry+1) < numEntries)
    {
        ++curEntry;
       display_cur()
    }
    else
    {
        alert("End");
    }
}



//-----------------------------------------------------

</script>
</head>

<body onload="display_cur()">

    <h1 id="hdr">Select a CSV:</h1>
    <output id="list"></output>

    <input type="file" id="files" name="files[]" multiple />
    <hr/>
    <table>
        <tr>
            <th>Transcription</th>
            <th>i3asr-sim</th>
            <th>edit</th>
        </tr>
        <tr>
            <td><p id="transcription"></p></td>
            <td><p id="i3asrhyp"></p></td>
            <td><input type="text" id="inputtranscription"></input></td>
        </tr>
    </table>

    <table>
        <tr>
            <td><button onclick="process_prev()">Prev</button></td>
            <td><button onclick="process_save()">Save</button></td>
            <td><button onclick="process_next()">Next</button></td>
        </tr>
    </table>


</body>
</html>
